<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        #lineChart, #barChart {
            width: 600px;
            height: 400px;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div id="lineChart"></div>
    <div id="barChart"></div>
    <script>
        // 折线图数据
        var lineData = {
            '10': 5, '16': 8, '19': 6, '27': 8, '28': 4, '30': 7,
            '03': 5, '07': 4, '17': 7, '29': 5, '32': 7, '20': 8,
            '26': 7, '09': 5, '12': 2, '13': 8, '15': 7, '22': 10,
            '02': 9, '18': 5, '33': 4, '05': 6, '14': 1, '06': 2,
            '21': 5, '23': 3, '11': 9, '04': 7, '01': 6, '25': 3,
            '24': 3, '08': 3, '31': 1
        };

        var xLineData = Object.keys(lineData);
        var yLineData = Object.values(lineData);

        var lineChart = echarts.init(document.getElementById('lineChart'));
        var lineOption = {
            title: {
                text: '红球'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: xLineData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '值',
                type: 'line',
                data: yLineData,
                itemStyle: {
                    color: '#4CAF50'
                },
                smooth: true
            }]
        };
        lineChart.setOption(lineOption);

        // 柱状图数据
        var barData = {
            '09': 1, '04': 2, '15': 2, '11': 3, '16': 5,
            '02': 2, '10': 4, '03': 3, '06': 1, '12': 2,
            '14': 1, '13': 2, '01': 2
        };

        var xBarData = Object.keys(barData);
        var yBarData = Object.values(barData);

        var barChart = echarts.init(document.getElementById('barChart'));
        var barOption = {
            title: {
                text: '蓝球'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: xBarData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '值',
                type: 'bar',
                data: yBarData,
                itemStyle: {
                    color: '#2196F3'
                }
            }]
        };
        barChart.setOption(barOption);
    </script>
</body>
</html>